<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script type="text/javascript" src="./js/vue.js"></script>
</head>
<!-- 监视属性watch:
        1.当被监视的属性变化时，回调函数自动调用，进行相关操作
        2.监视的属性必须存在，才能进行监视！！
        3.监视的两种写法：
            （1）.new Vue时传入watch配置
            （2）.通过vm.$watch监视
         -->
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
            <h2>今天天气很{{info}}</h2>
            <button @click="changWeather">点击我切换天气</button>
    </div>

    <script type="text/javascript">
        Vue.config.productionTip = false;  //阻止Vue在启动时生成 生产提示

        //创建Vue实例
        const vm = new Vue({
            el:'#root',
            data:{
                //用布尔值来判断
                isHot:true
            },
            methods:{
                changWeather(){
                    //取反 当我点击按钮 就再true和false之间切换
                    this.isHot =!this.isHot
                }
            },
            computed:{
                info(){
                    //三目表达式 如果是true执行 如果是false执行
                    return this.isHot?'炎热':'凉爽'
                }
            },
            // watch:{
            //     isHot:{
            //         immediate:true,//初始化时候 让handler调用一下
            //     // handler什么时候调用？让isHot发生改变时候
            //     handler(newValue,oldValue){
            //         // 上边传参是固定的写法 新的值 旧的值
            //         // 一开始只有新的 没有旧的
            //         console.log('isHot被修改了',newValue,oldValue);
            //     }
            //     }
               
            // },
        })


        //这个是在实例外边了
        vm.$watch('isHot',{
                immediate:true,//初始化时候 让handler调用一下
                handler(newValue,oldValue){
                    console.log('isHot被修改了',newValue,oldValue);
                }
            })
    </script>
</body>

</html>